<template>
  <van-tabs v-model:active="activeName">
    <div class="action">
      <span @click="delRead"><van-icon name="delete-o" /> 删除已读</span>
      <van-divider vertical :style="{ borderColor: 'gray' }" />
      <span @click="markRead"><van-icon name="brush-o" /> 一键已读</span>
    </div>
    <van-tab name="notice">
      <template #title>
        <van-badge
          :show-zero="false"
          :content="messageStore.noticeList.filter((item: MessageItem) => item.status == 0).length"
          :offset="[-10, 15]"
        >
          <span class="title">活动公告</span>
        </van-badge>
      </template>
      <List name="notice"></List>
    </van-tab>
    <van-tab name="order">
      <template #title>
        <van-badge
          :show-zero="false"
          :content="messageStore.orderList.filter((item: MessageItem) => item.status == 0).length"
          :offset="[-10, 15]"
        >
          <span class="title">订单信息</span>
        </van-badge>
      </template>
      <List name="order"></List>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import List from './components/List.vue'
import useMessageStore from '@/store/message'
import { MessageItem, MessageType } from './type'

const activeName = ref<MessageType>('notice')
const messageStore = useMessageStore()
const list = computed(() => messageStore[`${activeName.value}List`])
const delRead = () => {
  showConfirmDialog({
    message: '是否确认要删除已读通知'
  })
    .then(() => {
      list.value.forEach((item) => {
        if (item.status === 1) {
          messageStore.removeState(activeName.value, item.key)
        }
      })
    })
    .catch(() => {
      // on cancel
    })
}

const markRead = () => {
  list.value.forEach((item) => {
    messageStore.updateStatus(activeName.value, item.key)
  })
}
</script>

<style scoped lang="less">
.action {
  height: 50px;
  background-color: #f6f8fa;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 12px;
  color: #999;
}

.title {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 10px;
}
</style>
